<template>
  <a-modal
    v-model:open="visible"
    title="同步任务详情"
    width="800px"
    :footer="null"
  >
    <div class="task-detail" v-if="task">
      <!-- 基本信息 -->
      <a-descriptions title="基本信息" :column="2" bordered size="small">
        <a-descriptions-item label="任务名称">
          {{ task.task_name }}
        </a-descriptions-item>
        <a-descriptions-item label="同步模式">
          <a-tag :color="task.sync_mode === 'scheduled' ? 'blue' : 'default'">
            {{ task.sync_mode === 'scheduled' ? '定时同步' : '手动同步' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="数据源">
          {{ task.data_source?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="源表">
          {{ task.source_table }}
        </a-descriptions-item>
        <a-descriptions-item label="任务状态">
          <a-badge
            :status="getStatusBadge(task.sync_status)"
            :text="getStatusText(task.sync_status)"
          />
        </a-descriptions-item>
        <a-descriptions-item label="任务启用状态">
          <a-switch
            :checked="task.is_active"
            disabled
            checked-children="启用"
            un-checked-children="禁用"
          />
        </a-descriptions-item>
        <a-descriptions-item label="批次大小">
          {{ task.batch_size }}
        </a-descriptions-item>
        <a-descriptions-item label="定时表达式" v-if="task.sync_mode === 'scheduled'">
          <code>{{ task.schedule_expression || '-' }}</code>
        </a-descriptions-item>
      </a-descriptions>

      <!-- 执行统计 -->
      <a-descriptions
        title="执行统计"
        :column="3"
        bordered
        size="small"
        style="margin-top: 24px"
      >
        <a-descriptions-item label="总记录数">
          <a-statistic :value="task.total_records" />
        </a-descriptions-item>
        <a-descriptions-item label="已同步记录数">
          <a-statistic :value="task.synced_records" />
        </a-descriptions-item>
        <a-descriptions-item label="失败记录数">
          <a-statistic :value="task.failed_records" />
        </a-descriptions-item>
        <a-descriptions-item label="最后同步时间">
          {{ formatDateTime(task.last_sync_time) }}
        </a-descriptions-item>
        <a-descriptions-item label="下次同步时间" v-if="task.sync_mode === 'scheduled'">
          {{ formatDateTime(task.next_sync_time) }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDateTime(task.created_at) }}
        </a-descriptions-item>
      </a-descriptions>

      <!-- 错误信息 -->
      <div v-if="task.last_error" style="margin-top: 24px">
        <a-alert
          message="最后错误信息"
          :description="task.last_error"
          type="error"
          show-icon
        />
      </div>

      <!-- 过滤条件 -->
      <div v-if="task.sync_filter" style="margin-top: 24px">
        <a-card title="同步过滤条件" size="small">
          <code>{{ task.sync_filter }}</code>
        </a-card>
      </div>

      <!-- 字段映射 -->
      <div style="margin-top: 24px" v-if="task.field_mappings && task.field_mappings.length > 0">
        <a-card title="字段映射配置" size="small">
          <a-table
            :columns="mappingColumns"
            :data-source="task.field_mappings"
            :pagination="false"
            size="small"
            row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'source_field'">
                <a-tag color="blue">{{ record.source_field }}</a-tag>
              </template>
              <template v-if="column.key === 'target_field'">
                <a-tag color="green">{{ record.target_field }}</a-tag>
              </template>
              <template v-if="column.key === 'field_type'">
                <a-tag color="orange">{{ record.field_type }}</a-tag>
              </template>
              <template v-if="column.key === 'is_required'">
                <a-tag v-if="record.is_required" color="red">必需</a-tag>
                <span v-else>-</span>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  task: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:visible'])

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 表格列配置
const mappingColumns = [
  {
    title: '源字段',
    dataIndex: 'source_field',
    key: 'source_field',
    width: 150
  },
  {
    title: '目标字段',
    dataIndex: 'target_field',
    key: 'target_field',
    width: 150
  },
  {
    title: '字段类型',
    dataIndex: 'field_type',
    key: 'field_type',
    width: 100
  },
  {
    title: '必需',
    dataIndex: 'is_required',
    key: 'is_required',
    width: 80,
    customRender: ({ text }) => text ? '是' : '否'
  },
  {
    title: '默认值',
    dataIndex: 'default_value',
    key: 'default_field',
    customRender: ({ text }) => text || '-'
  }
]

// 工具函数
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

const getStatusBadge = (status) => {
  const statusMap = {
    pending: 'default',
    running: 'processing',
    success: 'success',
    failed: 'error'
  }
  return statusMap[status] || 'default'
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '等待中',
    running: '运行中',
    success: '成功',
    failed: '失败'
  }
  return statusMap[status] || status
}
</script>

<style scoped>
.task-detail {
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
}

:deep(.ant-statistic-content) {
  font-size: 16px;
  font-weight: 500;
}

code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}
</style>